<template>
  <div class="a-container">
    <h3 class="title">A组件</h3>
    <p>我是段落</p>
    <div class="footer">
      <a>baidu</a>
    </div>
  </div>
</template>
<!-- scoped：让样式仅在当前组件生效，不会影响其深层的子孙组件 -->
<style lang="scss" scoped>
/* 局部样式 */
$color: skyblue;

.a-container {
  border: 2px solid $color;

  .title {
    color: $color;
  }

  p {
    color: $color
  }

  .footer {
    a {
      color: brown;

      // &：引入父选择器
      &:hover {
        background-color: green;
      }
    }



  }


}
</style>
